<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>信息管理</title>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <!-- css -->
    <style>
        #exampleInputAmount {
            width: 200px;
        }

        .form-inline {
            margin-bottom: 15px;
        }

        table tr th {
            text-align: center;
        }
    </style>

</head>

<body>
    <div class="container">
        <!--  -->

        <div class="panel panel-info">
            <div class="panel-heading">
                <h3 class="panel-title">列表页</h3>
            </div>
            <div class="panel-body">
                <!-- search---查询 新增 -->
                <div class="form-inline">
                    <div class="form-group">
                        <input type="text" class="form-control" id="searchName" placeholder="请输入姓名">
                    </div>
                    <button type="submit" class="btn btn-default btn-primary" id="btnSearch"
                        onclick="search()">查询</button>
                    <a href="./add.html" class="btn btn-default btn-danger">新增</a>
                </div>

                <!-- 列表--查询 -->
                <table class="table table-bordered table-hover table-striped">
                    <thead>
                        <tr>
                            <th>编号</th>
                            <th>姓名</th>
                            <th>年龄</th>
                            <th>技能</th>
                            <th>头像</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody id="list">
                        <!-- <tr>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr> -->
                    </tbody>
                </table>

            </div>
        </div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
    <script>
        // 发起一个get请求,是一个promise对象，成功之后调用then里面的回调函数
        //  参数一 表示请求的地址
        // axios发送请求的时候content-type默认为application/json，传递的数据是json格式的
        // jquery发送请求的时候content-type为url编码的，传递的数据是一个类似于：a=值&b=值2
        axios.get('/api/v1/pets')
            .then((res) => {
                console.log(res); // res.data表示服务器接口输出的内容
                let strHtml = '';
                res.data.forEach((item, index) => {
                    strHtml += `
                    <tr>
                        <td>${index+1}</td>
                        <td>${item.name}</td>
                        <td>${item.age}</td>
                        <td>${item.edu}</td>
                        <td><img src="${item.img}"style="width:150px;height:120px;" /></td>
                        <td>
                            <button type="submit" class="btn btn-default btn-primary" onclick="delOne('${item.id}')">删除</button>    
                            <a href="./amend.html?id=${item.id}" class="btn btn-default btn-danger" >修改</a>    
                        </td>
                    </tr>`;
                });
                document.getElementById("list").innerHTML = strHtml;
            });



        // 查询名字
        function search() {
            var name = document.getElementById('searchName').value;
            var str = '';
            axios.get('/api/v1/pets/name', {
                    params: {
                        name: name
                    }
                })
                .then(res => {
                    console.log(res);
                    str += `
                    <tr>
                        <td>${res.data.info.id}</td>
                        <td>${res.data.info.name}</td>
                        <td>${res.data.info.age}</td>
                        <td>${res.data.info.edu}</td>
                        <td><img src="${res.data.info.img}" style="width:150px;height:120px;" /></td>
                        <td>
                            <button type="submit" class="btn btn-default btn-primary" onclick="delOne('${res.data.info.id}')">删除</button>    
                            <a href="./amend.html?id=${res.data.info.id}" class="btn btn-default btn-danger" >修改</a>    
                        </td>
                    </tr>`;
                    document.getElementById('list').innerHTML = str;
                    // window.location.reload();
                });
        }

        // 删除
        function delOne(id) {
            if (confirm('是否删除')) {
                axios.delete('/api/v1/pets/' + id)
                    .then(res => {
                        window.location.reload();
                    });
            }
        }
    </script>
</body>

</html>